<head>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1166024_vobajbx8d1o.css" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1631099_apll1sleb7k.css" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1503782_g2qej66f2o.css">
</head>

<div class="phone_hide">
    <div class="tou">
        <div class="main-md">
            <div class="revi-header">
                <div class="revi-header-lf">
                    <a href="#" class="revi-logo-img"> <img src="images/index/logo.png" alt="" /> </a>
                </div>
                <diV class="revi-header-rt">
                    <div class="revi-header-cont">
                        <div class="hot_word">
                            <form action="" method="" class="revi-search-bar">
                                <div class="revi-searchbar-content clearfix">
                                    <input type="text" placeholder="搜索商品" class="revi-search-ipt lf" />
                                    <button class="revi-search-btn lf" type="submit">
                                        <i class="iconfont icon-mima--"></i>
                                    </button>
                                </div>
                            </form>

                            <a href="#" class="words">推荐课程 </a>
                            <a href="#" class="words">推广项目 </a>
                            <a href="#" class="words">推荐课程 </a>
                            <a href="#" class="words">推广项目 </a>
                        </div>
                        <div class="dengs">
                            <a href="#"> 登录 </a>
                            <a href="#"> 注册 </a>
                        </div>
                        <div class="wei">
                            <img src="images/index/wei.jpg" alt=""> <br>
                            <span> 微信公众号 </span>
                        </div>
                    </div>

                    <!--导航-->
                    <div class="h-list">
                        <ul>
                            <li class="active"><a href="#">首页 </a></li>
                            <li><a href="#">课程推荐</a></li>
                            <li><a href="#">公开课</a></li>
                            <li><a href="#">远程课</a></li>
                            <li><a href="#">学习资料</a></li>
                            <li><a href="#">名师推荐</a></li>
                            <li><a href="#">应聘讲师</a></li>
                            <li><a href="#">行业资讯</a></li>
                            <li><a href="#">商城</a></li>
                            <div class="both"></div>
                        </ul>
                    </div>
                </diV>


            </div>
        </div>
    </div>

</div>
<div class="phone_show">
    <div class="ding">
        <div class="top">
            <div class="main-md">
                <p class="lf">欢迎进入知了知了平台！
                </p>
                <a href="#" class="rt"> 登录 </a>
                <a href="#" class="rt"> 注册 </a>
                <div class="both"></div>
            </div>
        </div>
    </div>
    <div class="head-phone">
        <div class="head-logo lf">
            <a href="./">
                <span><img src="images/index/logo.png" alt=""></span>
            </a>
        </div>
        <div class="top_cen rt">
            <a href="javascript:;" id="head-phone">
                <span></span>
                <span></span>
                <span></span>
            </a>
            <a class="cen_x active" href="javascript:;">
                ×
            </a>
        </div>
        <ul class="navlist_mo">
            <li><a href="#">首页 </a></li>
            <li><a href="#">课程推荐</a></li>
            <li><a href="#">公开课</a></li>
            <li><a href="#">远程课</a></li>
            <li><a href="#">学习资料</a></li>
            <li><a href="#">名师推荐</a></li>
            <li><a href="#">行业资讯</a></li>
            <li><a href="#">商城</a></li>
        </ul>
    </div>
</div>
<script>
    $(function () {
        //点击切换导航栏按钮  手机端
        $('.head-phone').on('click', '.top_cen a', function () {
            console.log(111);
            if ($(this).attr('class') != 'active') {
                $(this).addClass('active');
                $(this).siblings().removeClass('active');
            } else {
                $(this).removeClass('active');
                $(this).siblings().addClass('active');
            }
            if ($(this).attr('class') != 'cen_x active') {
                $('body').css('right', '50%');
                $('.nav_bg').fadeIn();
                $('.navlist_mo').css('right', '0');
            } else {
                $('body').css('right', '0');
                $('.nav_bg').fadeOut();
                $('.navlist_mo').css('right', '-50%');
            }
        });
        //侧边栏点击切换效果  手机端
        $('.head-phone').on('click', '.mo>a', function () {
            if ($(this).parent().attr('class') != 'mo active') {
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active');
            } else {
                $(this).parent().removeClass('active');
            }
        });

    })
</script>